<template>
  <div>
    <Panel title="访客" width="380px">
      <div class="info">
        <div class="item">
          <div class="in">138</div>
          <div>今日到访</div>
        </div>
        <div class="item">
          <div class="out">100</div>
          <div>已离场</div>
        </div>
      </div>
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chartLineRef"></div>
      </div>
    </Panel>
    <br /><br />
    <Panel title="受访单位统计" width="380px">
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chartPieRef"></div>
      </div>
    </Panel>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
const chartLineRef = ref();
const chartPieRef = ref();

const option = {
  grid: {
    left: 30,
    right: 10,
    top: 40,
    bottom: 20,
  },
  title: {
    text: "一周访客趋势",
    left: "left",
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    icon: "roundRect",
    data: ["来访", "离场"],
    textStyle: {
      color: "#FFFFFF",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  color: [
    {
      type: "linear",
      x: 0,
      y: 1,
      x2: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#2560FF",
        },
        {
          offset: 1,
          color: "#5DFFFF",
        },
      ],
      global: false,
    },
    {
      type: "linear",
      x: 0,
      y: 1,
      x2: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#FF4C25",
        },
        {
          offset: 1,
          color: "#FFD25D",
        },
      ],
      global: false,
    },
  ],
  xAxis: {
    type: "category",
    data: ["1F", "2F", "3F", "4F", "5F", "6F", "7F", "8F"],
    axisLine: {
      lineStyle: {
        color: "#FFFFFF80",
      },
    },
    axisTick: {
      show: true,
      length: 2,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#FFFFFF80",
      },
    },
    axisTick: {
      show: true,
      length: 2,
    },
  },
  series: [
    {
      name: "离场",
      symbol: "none",
      data: [150, 232, 201, 154, 190, 330, 410, 256],
      type: "line",
      smooth: true,
      barWidth: 10,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#2560FF80",
          },
          {
            offset: 1,
            color: "#5DFFFF00",
          },
        ]),
      },
    },
    {
      name: "来访",
      symbol: "none",
      data: [725, 932, 813, 680, 1290, 922, 890, 718],
      type: "line",
      smooth: true,
      barWidth: 10,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#FF4C2580",
          },
          {
            offset: 1,
            color: "#FFD25D00",
          },
        ]),
      },
    },
  ],
};

onMounted(() => {
  echarts.init(chartLineRef.value).setOption(option);
  echarts.init(chartPieRef.value).setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      icon: "circle",
      right: 30,
      top: "30%",
      orient: "vertical",
    },
    series: [
      {
        name: "来访",
        type: "pie",
        radius: ["40%", "80%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "部门1" },
          { value: 735, name: "部门2" },
          { value: 580, name: "部门3" },
          { value: 484, name: "部门4" },
        ],
      },
    ],
  });
});
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #ffffff;
  margin: 16px 0px;
  .item {
    display: flex;
    flex-direction: row;
    font-size: 16px;
    align-items: center;
    gap: 4px;
    .in {
      font-size: 40px;
      background: linear-gradient(242deg, #ffd25d 3%, #ff4c25 107%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    .out {
      font-size: 40px;
      background: linear-gradient(238deg, #5dffff 0%, #2560ff 107%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }
}

.chart-container {
  width: 100%;
  height: 260px;
}
</style>
